<template>
    <div>
        <Hidden_top />
        <div class="purchaseTags">
            <div class="purchaseTop">
                <div class="tags">
                    <div class="tags_liet">
                        <div v-show="activesIndex == '1'" class="tags_liet_R">
                            <img src="@/assets/img/header/hot.png" alt="">
                            <span style="margin-left: 10px;">热门分类</span>
                            <span class="sjx"></span>
                        </div>
                        <div v-for="item in activeName" :key="item.id" @click="tagsLietc(item.id)">
                            <span :class="{ active: actives == item.id }" class="tags_liet_c">{{
                                item.name }}</span>
                        </div>
                    </div>
                    <div class="caption"></div>
                </div>
            </div>
            <div v-if="activesIndex == '1'">
                <Website />
            </div>
            <div v-else-if="activesIndex == '2'">
                <Information />
            </div>
            <div v-else-if="activesIndex == '3'">
                <ProductInfo />
            </div>
            <div v-else-if="activesIndex == '4'">
                <Brandzone />
            </div>
            <div v-else-if="activesIndex == '5'">
                <Membership />
            </div>
        </div>
        <!-- <Hidden_bootm></Hidden_bootm> -->
    </div>
</template>

<script setup>
import Hidden_top from '@/components/hidden_top/index.vue';
import Hidden_bootm from '@/components/hidden_bootm/index.vue';
// 首页
import Website from '../component/website/index.vue'
// 采购
import Information from '../component/information/index.vue'
// 商品
import ProductInfo from '../component/productInfo/index.vue'
// 品牌
import Brandzone from '../component/brandzone/index.vue'
// 会员权益
import Membership from '../component/membership/index.vue'
import { onMounted, ref } from 'vue'


import { useCounterStore } from '../../pinia/index'
const store = useCounterStore()


const activeIndex = '1'
let actives = ref(activeIndex)
let activesIndex = ref('1')
const tags = [
    {
        id: '1',
        name: '首页'
    },
    {
        id: '2',
        name: '采购信息'
    },
    {
        id: '3',
        name: '商品信息'
    },
    {
        id: '4',
        name: '品牌专区'
    },
    {
        id: '5',
        name: '会员权益'
    },
    {
        id: '6',
        name: '关于我们'
    },
]
const activeName = ref(tags)


//高亮
const tagsLietc = (id) => {
    actives.value = id
    activesIndex.value = id
}

onMounted(() => {
    // 跳转到首页高亮
    actives.value = store.count
    activesIndex.value = store.count
})

</script>

<style lang="scss" scoped>
.active {
    background-color: #0049A8;
}

.purchaseTags {
    background-color: #2270D7;
    height: 50px;

    .purchaseTop {
        width: 75vw;
        margin: 0 auto;

        .tags {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 75vw;
            height: 50px;

            .caption {
                width: 184px;
                height: 40px;
                border-radius: 5px;
                background: url('@/assets/img/header/zhaobaio.png') no-repeat center;
                background-color: #FE8D03;
            }

            .tags_liet {
                display: flex;
                align-items: center;

                .tags_liet_R {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 15vw;
                    height: 3.125vw;
                    background: url('@/assets/img/header/remen.png') no-repeat;
                    background-size: 15vw 3.0625vw;
                    font-size: 18px;
                    font-weight: 700;
                    color: aliceblue;
                    position: relative;

                    .sjx {
                        position: absolute;
                        top: 49px;
                        left: 100px;
                        border: 10px solid transparent;
                        border-top-color: #FE8D03;
                    }

                }

                .tags_liet_c {
                    display: inline-block;
                    width: 120px;
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                    color: #fff;
                }
            }
        }
    }


}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>